<template>
	<view class="withdraw">
		<u-navbar
			back-text="提现"
			:height="navHeight"
			:border-bottom="false"
			:back-text-style="textStyle"
			back-icon-color="#000000"
			style="font-weight: bold;font-family: PingFang SC;"
		></u-navbar>
		<!-- 提现开始 -->
		<view class="withdraw_box">
			<!-- 提现盒子 -->
			<view v-if="pageType == 1" class="withdraw_bodyer">
				<scroll-view :style="{ height: comHeight }" lower-threshold="20" @scrolltolower="scrolltolower" scroll-y="true" class="scroll-Y">
					<!-- 头部 -->
					<view class="bodyer_top">
						<view style="width: 92%;margin: 0 auto;display: flex;">
							<view style="width: 50%;">提现金额</view>
							<view style="width: 50%;text-align: right;">
								<text style="margin-right: 5rpx;">提现金额￥{{ money }}</text>
								<text style="color:#FCA800;" @click="nowMoney = money">全部提现</text>
							</view>
						</view>
					</view>
					<view style="width: 100%;background-color: #fff;line-height: 100rpx;font-size: 34rpx ;border-bottom: 2rpx solid #e4e4e4;">
						<view style="width: 92%;margin: 0 auto;display: flex;" class="inputBox">
							<view style="width:5%;">￥</view>
							<input
								:input="importChange()"
								maxlength="10"
								v-model="nowMoney"
								placeholder-style="line-height: 100rpx;padding: 0 20rpx;"
								style="height: 100rpx;width:90%;line-height: 100rpx;font-size: 42rpx;padding: 0 20rpx;"
								type="number"
							/>
							<u-icon @click="nowMoney = 0" style="width: 5%;" name="close" color="#222222" size="24" ref="uCode"></u-icon>
						</view>
					</view>
					<view v-if="showExceed" style="width: 100%;background-color: #fff;line-height: 100rpx;font-size: 28rpx;border-bottom: 8rpx solid #e4e4e4;">
						<view style="width: 92%;margin: 0 auto; color: #FF000C;">超过提现金额</view>
					</view>
					<!-- 头部结束 -->
					<view style="width: 100%; background-color: #fff;line-height: 80rpx;font-size: 28rpx;">
						<view style="width: 92%;margin: 0 auto;">
							<view style="display: flex;padding-top: 40rpx;">
								<view style="width: 40%;height: 48rpx;line-height: 48rpx;">输入支付宝提现账号</view>
								<input
									maxlength="20"
									v-model="withdrawFrom.account"
									placeholder-style="margin-left: 1%;line-height: 40rpx;padding: 0 20rpx;"
									style="border: 1rpx solid #E8E8E8; height: 40rpx;width:59%;line-height: 40rpx;font-size: 30rpx;padding: 0 20rpx;margin-left: 1%;"
									type="number"
								/>
							</view>
							<view style="display: flex;padding-top: 10rpx;padding-bottom: 40rpx;">
								<view style="width: 40%;height: 48rpx;line-height: 48rpx;">输入支付宝姓名</view>
								<input
									maxlength="20"
									v-model="withdrawFrom.name"
									placeholder-style="margin-left: 1%;line-height: 40rpx;padding: 0 20rpx;"
									style="border: 1rpx solid #E8E8E8; height: 40rpx;width:59%;line-height: 40rpx;font-size: 30rpx;padding: 0 20rpx;margin-left: 1%;"
									type="text"
								/>
							</view>
						</view>
					</view>
					<view style="width: 92%;margin: 0 auto;">
						<view
							@click="goWithdraw"
							style="width: 100%;background-color: #FCA800;color: #fff;border-radius: 20px;height: 36px;line-height: 36px;text-align: center;font-size: 36rpx;margin-top: 24rpx;"
						>
							提交
						</view>
					</view>
					<!-- 提现明细 -->
					<view style="width: 92%;margin: 0 auto;color: #626264;">
						<view style="line-height: 100rpx;font-size: 30rpx;">提现记录</view>
						<view style="margin-bottom: 20rpx;" v-for="item in dataList">
							<view style="display: flex;">
								<view style="width: 80%;color: #626264;line-height: 40rpx;">
									<text style="font-size: 30rpx;">{{ item.withdrawStatus == 1 ? '提现中' : '已打款' }}</text>
									<text style="margin-left:16rpx;font-size: 26rpx;">{{ item.account }}</text>
								</view>
								<view style="width: 20%;text-align: right;color: #DA4950;font-size: 30rpx;">￥{{ item.money }}</view>
							</view>
							<view style="color: #BBBBBB;font-size: 28rpx;line-height: 40rpx;">{{ item.applyTime }}</view>
						</view>
						<view style="color: #626264;width: 100%;text-align: center;font-size: 30rpx;line-height: 80rpx;">
							{{ form.page < contPage ? '上滑加载更多' : '没有更多了' }}
						</view>
					</view>
					<!-- 提现明细结束 -->
				</scroll-view>
			</view>
			<!-- 提现盒子结束 -->
			<!-- 提交成功 -->
			<view v-if="pageType == 2" :style="{ 'min-height': comHeight }" style="width: 100%;background-color: #fff;">
				<view style="width: 100%;text-align: center;padding-top: 30%;">
					<image src="https://beedao.oss-cn-beijing.aliyuncs.com/8b3bce0fcf814c789373fd6a17e43b0c.png" style="width: 102px;height: 106px;" mode=""></image>
					<view style="color: #3F3F3F;font-size: 40rpx;line-height: 100rpx;font-weight: bold;">提交成功</view>
				</view>
			</view>
			<!-- 提交成功结束 -->
		</view>
		<!-- 提现开始结束 -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageType: 1, //判断是提现页面还是提现完成
			navHeight: 0,
			comHeight: 0,
			money: 0, //全部可提现金额
			nowMoney: 0, //当前输入金额
			showExceed: false, //是否超出
			background: {
				backgroundColor: '#fca800'
			},
			withdrawFrom: {
				account: '',
				name: ''
			},
			contPage: 1,
			form: {
				page: 1,
				pageSize: 10
			},
			dataList: []
		};
	},
	onLoad(option) {
		var that = this;
		that.money = parseFloat(option.money);
		var menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		const { top, width, height, right } = menuButtonInfo;
		uni.getSystemInfo({
			success: res => {
				const { statusBarHeight } = res;
				const margin = top - statusBarHeight;
				var navHeight = height + statusBarHeight + margin * 2;
				that.navHeight = height + margin * 2;
				that.comHeight = res.windowHeight - navHeight + 'px';
			}
		});
		// 获取提现记录
		that.getRecord();
	},
	onShow() {},
	methods: {
		// 滚动到底部出发
		scrolltolower(e) {
			if (this.form.page < this.contPage) {
				this.form.page = this.form.page + 1;
				this.getRecord();
			}
		},
		// 键盘输入事件
		importChange(e) {
			if (this.nowMoney > this.money) {
				this.showExceed = true;
			} else {
				this.showExceed = false;
			}
		},
		// 点击按钮
		codeChange() {
			this.nowMoney = this.money;
		},
		// 去提现
		goWithdraw() {
			if (this.nowMoney > this.money) {
				uni.showToast({
					title: '提现金额大于总金额',
					mask: true,
					icon: 'none',
					duration: 2000
				});
				return false;
			}else if(this.withdrawFrom.name == ""){
				uni.showToast({
					title: '请填写提现账号',
					mask: true,
					icon: 'none',
					duration: 2000
				});
				return false;
			}else if(this.withdrawFrom.account == ""){
				uni.showToast({
					title: '请填写提现姓名',
					mask: true,
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'user-withdraw/apply'
			};
			let data = {
				money: this.nowMoney,
				account: this.withdrawFrom.account,
				name: this.withdrawFrom.name
			};
			this.http.httpTokenRequest(opts, data).then(res => {
				//打印请求返回的数据
				if (res.code == '200') {
					this.pageType = 2;
					// this.getRecord();
				} else {
					uni.showToast({
						title: res.message,
						mask: true,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		// 获取提现记录
		getRecord() {
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'user-withdraw/page'
			};
			let data = this.form;
			this.http.httpTokenRequest(opts, data).then(res => {
				//打印请求返回的数据
				if (res.code == '200') {
					var arr = [...this.dataList, ...res.data.records];
					this.dataList = arr;
					this.contPage = res.data.pages;
				} else {
					uni.showToast({
						title: res.message,
						mask: true,
						icon: 'none',
						duration: 2000
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
//提现盒子
.withdraw_bodyer {
	width: 100%;
	background-color: #e4e4e4;
}
.bodyer_top {
	border-top: 8rpx solid #e4e4e4;
	background-color: #fff;
	line-height: 80rpx;
	border-bottom: 2rpx solid #e4e4e4;
}

//提现盒子结束
</style>
